import React, { Component } from 'react'
import { Tabs, } from 'antd-mobile'
import { NavBar, Search, Item, Icon, Image, Button as ButtonMK, FlatList } from 'components'
import { msg, post } from '../../../utils'
export default class Returnpolicy extends Component<any, any> {

    public state = {
        tabIndex: 0,
        tabs: [
            { title: '售后申请', index: 0, className: '' },
            { title: '处理中', index: 1, className: '' },
            { title: '申请记录', index: 2, className: '' }
        ]
    }

    private statusIndex = {
        0: 1,
        1: 1
    }

    private index: number = 1

    public render(): JSX.Element {
        const { tabs, tabIndex } = this.state
        const { returnpolicyData, returnList } = this.props
        return (
            <div className="returnpolicy">
                <NavBar
                    fixed={true}
                    title={<div className="returnpolicy_NavTitle">退换货</div>}
                />
                <div className="returnpolicy_tabs">
                    <Tabs
                        onTabClick={this.handleTabClick}
                        tabBarActiveTextColor="#222"
                        page={tabIndex}
                        animated={false}
                        tabs={tabs}
                        destroyInactiveTab={true}
                        onChange={() => { this.statusIndex = { 0: 1, 1: 1 }; this.index = 1 }}
                        renderTab={
                            (item) => {
                                return (
                                    <div className={(item.index === tabIndex) ? 'myOrder_tabs_active' : 'myOrder_tabs_default'}>
                                        {item.title}
                                    </div>
                                )
                            }
                        }
                    >
                        {/* 申请售后 */}
                        <div className="returnpolicy_customerService">
                            <div style={{ height: '2.4rem' }}>
                                <div className="returnpolicy_search">
                                    <Search
                                        className="returnpolicy_search_btn"
                                        placeholder="商品名称/商品编号/订单编号"
                                    />
                                </div>
                            </div>
                            <FlatList
                                data={returnpolicyData}
                                onRefresh={this.getData}
                                renderItem={(item: any, index: number) => {
                                    return (
                                        <div className="returnpolicy_customerService_order" key={index}>
                                            <Item
                                                onPress={() => { this.gotoUrl(`/shop_bus/${item.get_seller_name && item.get_seller_name.id}`) }}
                                                title={<div className="returnpolicy_customerService_order_title">
                                                    <Icon className="returnpolicy_customerService_order_title_shopIcon" type="shop" />
                                                    <span className="returnpolicy_customerService_order_title_text">{item.get_seller_name && item.get_seller_name.name}</span>
                                                    <Icon className="returnpolicy_customerService_order_title_rightIcon" type="arrow_right" />
                                                </div>}
                                            />
                                            {
                                                item.order_goods && item.order_goods.map((itemData: any, i: number) => {
                                                    return (
                                                        <div className="returnpolicy_customerService_order_goods" key={i}>
                                                            <div className="returnpolicy_customerService_order_goods_img">
                                                                <Image src={itemData.pic} />
                                                            </div>
                                                            <div className="returnpolicy_customerService_order_goods_info">
                                                                <div className="returnpolicy_customerService_order_goods_info_title">
                                                                    {itemData.short_title}
                                                                </div>
                                                                <div className="returnpolicy_customerService_order_goods_info_num">
                                                                    <span>数量： {itemData.number}</span>
                                                                    <span onClick={this.handleReturn.bind(this, itemData, index)}>申请售后</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    )
                                                })
                                            }
                                        </div>
                                    )
                                }}
                            />
                        </div>
                        {/* 处理中 */}
                        <div className="returnpolicy_handling">
                            <div style={{ height: '2.4rem' }}>
                                <div className="returnpolicy_search">
                                    <Search className="returnpolicy_search_btn" placeholder="商品名称/商品编号/订单编号" />
                                </div>
                            </div>
                            <FlatList
                                data={returnList[0]}
                                onRefresh={this.getOrderRefundList.bind(this, 0)}
                                renderItem={(item: any, index: number) => {
                                    return (
                                        <div className="returnpolicy_handling_order" key={index}>
                                            {
                                                this.getItemGoodsInfo(item)
                                            }
                                            <div className="returnpolicy_handling_order_process">
                                                <div onClick={() => { this.handleToDetail(item) }}>
                                                    <div>{this.getStatusLabel(item.status)}</div>
                                                    {
                                                        this.getServiceStatusNotice(item.status)
                                                    }
                                                </div>
                                                <Icon type="arrow_right" />
                                            </div>
                                            {
                                                this.getServiceListBtn(item.status, item.id, 0, index, item.order_goods)
                                            }
                                        </div>
                                    )
                                }}
                            />
                        </div>
                        {/* 申请记录 */}
                        <div className="returnpolicy_handling">
                            <div style={{ height: '2.4rem' }}>
                                <div className="returnpolicy_search">
                                    <Search className="returnpolicy_search_btn" placeholder="商品名称/商品编号/订单编号" />
                                </div>
                            </div>
                            <FlatList
                                onRefresh={this.getOrderRefundList.bind(this, 1)}
                                data={returnList[1]}
                                renderItem={(item: any, index: number) => {
                                    return (
                                        <div className="returnpolicy_handling_order" key={index}>
                                            {
                                                this.getItemGoodsInfo(item)
                                            }
                                            <div className="returnpolicy_handling_order_process">
                                                <div onClick={() => { this.gotoUrl('/My/serviceListHandle/' + item.id) }}>
                                                    <div>
                                                        {
                                                            (item.status === 3 || item.status === 4)
                                                                ? '已完成'
                                                                : this.getStatusLabel(item.status)
                                                        }
                                                    </div>
                                                    {this.getServiceStatusNotice(item.status)}
                                                </div>
                                                <Icon type="arrow_right" />
                                            </div>
                                            {
                                                this.getServiceListBtn(item.status, item.id, 1, index, item.order_goods)
                                            }
                                        </div>
                                    )
                                }}
                            />
                        </div>
                    </Tabs>
                </div>

            </div>
        )
    }

    private getData = (finishLoad: () => void) => {
        const { userInfo, SET_RETURNPOLICY_DATA, returnpolicyData } = this.props
        post('orderapi/orderApplyService', {
            userId: userInfo.id,
            page: this.index
        }).then((data: any) => {
            if (this.index === 1) {
                SET_RETURNPOLICY_DATA(data.data)
            } else {
                if (data.data.length) {
                    const val = [...returnpolicyData]
                    SET_RETURNPOLICY_DATA(val.concat(data.data))
                    finishLoad()
                }
            }
            this.index++
        })
    }

    private getOrderRefundList = (status: number, finishLoad: () => void) => {
        const { userInfo, SET_USER_RETURN_LISIT, returnList } = this.props
        post('orderapi/orderRefundList', {
            userId: userInfo.id,
            page: this.statusIndex[status],
            status
        }).then((data: any) => {
            if (this.statusIndex[status] === 1) {
                SET_USER_RETURN_LISIT(data.data, status)
            } else {
                if (data.data.length) {
                    const val = [...returnList[status]]
                    SET_USER_RETURN_LISIT(val.concat(data.data), status)
                    finishLoad()
                }
            }
            this.statusIndex[status]++
        })
    }

    // 根据服务的状态 获取操作按钮
    private getServiceListBtn = (status: any, goodsId: any, next: number, index: number, item: any) => {
        if (status !== 0) {
            return (
                <div style={{ height: '0.7rem', background: '#fff' }} />
            )
        } else {
            return (
                <div className="returnpolicy_handling_order_operation">
                    {(status === 1 || status === 2) && <ButtonMK
                        className="returnpolicy_handling_order_operation_cancel"
                        onClick={this.handleCancelApply.bind(this, goodsId, next, index)}
                    >
                        取消申请
                    </ButtonMK>}

                    {status === 2 && <ButtonMK
                        className="returnpolicy_handling_order_operation_writebtn"
                        onClick={this.handleTianXie.bind(this, next, index, item)}
                    >
                        填写发货单
                    </ButtonMK>}
                </div>
            )
        }
    }

    private handleTianXie = (next: number, index: number, item: any) => {
        const { SET_USER_RETURN_DETAIL, returnList } = this.props
        item.refund_no = returnList[next][index].refund_no
        item.create_time = returnList[next][index].create_time
        SET_USER_RETURN_DETAIL(item)
        this.gotoUrl('/My/Invoice/')
    }

    private handleReturn(itemData: any, index: number) {
        const { SET_USER_RETURN_DETAIL, returnpolicyData } = this.props
        itemData.user = {}
        itemData.user.name = returnpolicyData[index].take_name
        itemData.user.phone = returnpolicyData[index].take_tel
        SET_USER_RETURN_DETAIL(itemData)
        this.gotoUrl('/My/customerService/')
    }
    private getStatusLabel = (status: number) => {
        switch (status) {
            case 0:
                return '待审核'
            case 1:
                return '请您发货'
            case 2:
                return '第三方收货'
            case 3:
                return '取消'
            case 4:
                return '关闭'
            case 5:
                return '已完成'
            default: return null
        }
    }

    // 获取不同状态下的提示信息
    private getServiceStatusNotice = (status: any) => {
        switch (status) {
            case 0:
                return (
                    <React.Fragment>
                        <div><p>您的服务单申请成功，待售后审核</p></div>
                    </React.Fragment>
                )
            case 1:
                return (
                    <React.Fragment>
                        <div><p>请您尽快发货并填写运单号，如未及时填写...</p></div>
                    </React.Fragment>
                )
            case 2:
                return (
                    <React.Fragment>
                        <div><p>请您尽快发货并填写运单号，如未及时填写...</p></div>
                    </React.Fragment>
                )
            case 3:
                return (
                    <React.Fragment>
                        <div><p>您的服务单已取消</p></div>
                    </React.Fragment>
                )
            case 4:
                return (
                    <React.Fragment>
                        <div><p>您的服务单已关闭</p></div>
                    </React.Fragment>
                )
            case 5:
                return (
                    <React.Fragment>
                        <div><p>服务已完成，感谢您对中恒的支持</p></div>
                    </React.Fragment>
                )
            default: return null
        }
    }
    // 获取商品信息
    private getItemGoodsInfo = (item: any) => {
        return (
            <React.Fragment>
                <Item
                    // onPress={() => { this.gotoUrl('/shop_bus/1') }}
                    title={<div className="returnpolicy_handling_order_title">服务单号: {item.refund_no}</div>}
                    value={
                        <div className="returnpolicy_handling_order_value">
                            <Icon className={item.type === 1 ? 'returnpolicy_handling_order_value_colorRed' : 'returnpolicy_handling_order_value_colorOrange'} type={(item.type === 1) ? 'returnPolicy' : 'changeGoods'} />
                            <span>{item.type === 1 ? '退货' : '换货'}</span>
                        </div>
                    }
                />
                <div className="returnpolicy_handling_order_goods">
                    <div className="returnpolicy_handling_order_goods_img">
                        <Image src={item.order_goods && item.order_goods.pic} />
                    </div>
                    <div className="returnpolicy_handling_order_goods_info">
                        <div className="returnpolicy_handling_order_goods_info_title">
                            {item.order_goods && item.order_goods.short_title}
                        </div>
                        <div className="returnpolicy_handling_order_goods_info_num">
                            <span>数量： {item.order_goods && item.order_goods.number}</span>
                        </div>
                    </div>
                </div>
            </React.Fragment>
        )
    }
    private handleToDetail = (item: any) => {
        if (item.type === 0) {
            this.gotoUrl('/My/serviceListApproval/1')
        } else {
            this.gotoUrl('/My/serviceListHandle/' + item.id)
        }
    }

    private handleCancelApply = (id: string, next: number, index: number) => {
        msg('确定要取消申请？').then(() => {
            const { userInfo, returnList, SET_USER_RETURN_LISIT } = this.props
            post('orderapi/orderRefundCancal', {
                userId: userInfo.id,
                id
            }).then((data: any) => {
                const val: any = [...returnList[index]]
                val.splice(index, 1)
                SET_USER_RETURN_LISIT(val, next)
            })
        })
    }

    private gotoUrl = (url: string) => {
        this.props.history.push(url)
    }
    private handleTabClick = (tab: any, index: number) => {
        // this.props.history.push('/My/myOrder/' + index)
        this.setActiveTabs(index)
    }
    private setActiveTabs = (index: number) => {
        this.setState({
            tabIndex: index
        })
    }
}